<template>
  <div class="about">
    <h1>Model -> View</h1>
    <br />
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>{{ person.name }}</th>
          <th>{{ person.age }}</th>
          <th>{{ person.profile.gender }}</th>
        </tr>
      </tbody>
    </table>
    <h1>View -> Model</h1>
    <!-- v-model="loginReq.username"  value=loginReq.username -->
    <div>用户名: <input type="text" id="username" v-model="username" /></div>
    <div>密码: <input type="password" v-model="password" /></div>

    <!-- innerText -->
    <div>{{ testId }}</div>

    <!-- 元素属性 -->
    <!-- ref 类型的变量，vue模版系统会自动解开, testId.value 提取出来：不需要 testId.value -->
    <!-- v-bind:id  : ==  v-bind: -->
    <div :id="testId">{{ testId }}</div>

    <!-- 元素方法 -->
    <!-- onClick -- v-on:click -->
    <!-- v-on: == @ -->
    <div style="color: red;"><button @click="handleClieck">按钮</button></div>

    <!-- 元素样式 -->
    <!-- https://cn.vuejs.org/guide/essentials/class-and-style.html -->
    <!-- sytle: CSSStyleDeclaration-->
    <button :style="buttonStyle" @click="handleClieck">按钮</button>
    <!-- classList DOMTokenList [] -->
    <div style="height: 40px; width: 40vw; background-color: bisque;" :class="divClass"></div>


    <!-- 表单绑定，用户输入绑定 -->
    <!-- v-model(双向绑定): input value -- name --- input value -->
    <input v-model="name" v-focus type="text" @keydown.enter="pressEnter">

    <label for="pet-select">Choose a pet:</label>


    <select v-model="choiceValue" name="pets" id="pet-select">
      <option v-for="(item) in petOptions" :key="item.value" :value="item.value"> {{ item.lable }}</option>
    </select>
    <!-- 具体选择菜单的商品 -->
    <div v-if="choiceValue === 'dog'">dog food</div>
    <div v-else-if="choiceValue === 'cat'">cat food</div>
    <div v-else>other food</div>

    <!-- 引入组件 -->
    <!-- <h1 id="xxx"></h1> -->
    <!-- :count="initCount" @update:count="v => initCount=v" -->
    <!-- 子组件: modelValue, update:modelValue v-model modelValue值的更新 -->
     <!-- 默认绑定的属性 modelValue  update:modelValue-->
     <!-- 属性count, 事件 update:count -->
    <TestComponent :title="choiceValue" @selectChanged="v => console.log('selectChanged: ', v)" v-model:count="initCount"></TestComponent>
  </div>
</template>

<script setup>
import {
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  nextTick
} from 'vue'


// 把它当作一个自定义的HTML元素: h1, a, table, ...
// Component ---> 自定义标签
// <h1></h1>   <TestComponent></TestComponent>  <test-component></test-component>
// 
// 如果已经注册为全局组件，就可以直接使用
// import TestComponent from '../components/TestComponent.vue'

// 上面试图对应的JS控制逻辑, 原生的JS对象
// const person = { name: '张山', age: 3000 }

const testId = ref('test')

const initCount = ref(0)

const name = ref('')

// js style 对象
// CSSStyleDeclaration {backgroundColor: ""}
const buttonStyle = reactive({ backgroundColor: 'grey' })

const handleClieck = () => {
  console.log('handleClieck')
  buttonStyle.backgroundColor = 'yellow'
  divClass.push('bg')
}

const divClass = reactive([])

// 想要让vue框架 监听 Model变化(person), 声明为vue的响应式对象
const person = reactive({ name: '张山', age: 3000, profile: { gender: 'female' } })
// person.name

// const loginReq = reactive({ username: '', password: '' })

const username = ref('init')
const password = ref('')

// reactive({value: v})
// 修改这个响应式对象
username.value = 'test'


const pressEnter = () => {
  console.log('press enter')
}

// vFocus ---> v-focus
const vFocus = {
  mounted: (el) => { el.focus() }
}

const choiceValue = ref('')


// <!-- <option value="">--Please choose an option--</option>
//       <option value="dog">Dog</option>
//       <option value="cat">Cat</option>
//       <option value="hamster">Hamster</option>
//       <option value="parrot">Parrot</option>
//       <option value="spider">Spider</option>
//       <option value="goldfish">Goldfish</option> -->
// 下来列表
const petOptions = reactive([
  { lable: '--Please choose an option--', value: '' },
  { lable: 'Dog', value: 'dog' },
  { lable: 'Cat', value: 'cat' },
  { lable: 'Hamster', value: 'hamster' },
])

// 生命周期钩子
// 试图挂载之前
onBeforeMount(() => {
  console.log('onBeforeMount hook')
})
// 视图挂在之后
onMounted(() => {
  console.log('onMounted hook')
  // 获取这个元素的值？init？test? '' 其他
  username.value = 'test01'
  // 为什么我修改了这个响应式变量的值，里面获取这个界面元素，当前这个界面的元素没变化
  // 在下次更新后，执行这段代码
  nextTick(() => {
    console.log(document.getElementById('username').value)
  })
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate hook')
})
onUpdated(() => {
  console.log('onUpdated hook')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount hook')
})
onUnmounted(() => {
  console.log('onUnmounted hook')
})
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.bg {
  background-color: aqua !important;
}
</style>
